<template>
  <HeadContainer class="mine-legal" :title="$t('title.legal')" @back="back">
    <div class="gap-col-24">
      <div @click="navigate(`terms-of-service`)" class="gap-col-24 about-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="document"></Icon>
            {{ $t('title.tos') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`privacy-policy`)" class="gap-col-24 mt-4 about-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="lock2"></Icon>
            {{ $t('title.pp') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`cookie-policy`)" class="gap-col-24 mt-4 about-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="cookie"></Icon>
            {{ $t('title.cp') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`dmca`)" class="gap-col-24 mt-4 about-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="document"></Icon>
            DMCA
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
      <div @click="navigate(`usc-statement`)" class="gap-col-24 mt-4 about-list pointer">
        <div class="d-flex justify-space-between w-100 align-center">
          <div class="d-flex align-center">
            <Icon class="me-2" name="document"></Icon>
            {{ $t('title.uscStmt') }}
          </div>
          <Icon class="ms-2" name="arrowRight"></Icon>
        </div>
      </div>
    </div>
  </HeadContainer>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { $t } from '@/i18n'
import HeadContainer from '@/components/layout/HeadContainer.vue'

const emits = defineEmits(['toPage', 'back'])
const router = useRouter()

function navigate(to) {
  emits('toPage', to)
  router.replace({ path: `legal/${to}` })
}

function back() {
  emits('back')
  router.replace({ name: 'mine' })
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: black;
}
</style>
